<template>
	<view class="container">
		<view class="content rowsb">
			<view>联系人</view>
			<view><input v-model="userName" placeholder="姓名" class="content_input" type="text"></view>
		</view>
		<!-- 	<view class="content rowsb">
			<view>性别</view>
			<view>
				<label>
					<radio @click="radios(2)" :checked="userSex===2" value="2" />女</label>
				<label style="padding-left: 12rpx;">
					<radio @click="radios(1)" :checked="userSex===1" value="1" />男</label>
			</view>
		</view> -->
		<view class="content rowsb">
			<view>电话</view>
			<view><input v-model="userPhone" placeholder="电话" maxlength="11" class="content_input" type="number"></view>
		</view>
		<view class="content rowsb">
			<view>区域</view>
			<view>
				<BiaofunRegion class="regiones" @change1="changeRegion" :disabled="isDis" :defaultValue="addressName"></BiaofunRegion>
			</view>
		</view>
		<view class="content rowsb">
			<view>详细地址</view>
			<view><input v-model="userCity" placeholder="详细地址" class="content_input" type="text"></view>
		</view>
		<view class="content rowsb">
			<view>设置默认地址</view>
			<switch :checked="checked" @change="switchMen" />
		</view>
		<view class="bottom_total">
			<view class="xia_dan" @click="submitFromAddress">保存</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import BiaofunRegion from '../../components/biaofun-region/biaofun-region.vue';
	import {
		updateAddress
	} from '../../common/path.js'
	export default {
		components: {
			BiaofunRegion
		},
		data() {
			return {
				checked: false,
				userName: '',
				userSex: 1, //性别
				userPhone: '',
				userCity: '',
				'isDis': false,
				sca_name: '',
				bottomImg: 0,
				is_default: 0,
				addressId: ''
			}
		},
		onLoad(option) {
			this.addressDetailMen(option)
		},
		methods: {
			//地址详情
			addressDetailMen(option){
				if (option.addressDetail) {
					this.addressDetail = JSON.parse(option.addressDetail)
					this.addressId = this.addressDetail.id
					console.log('address=========>',this.addressDetail);
					this.userName = this.addressDetail.name
					this.userPhone = this.addressDetail.tel
					//地址
					 this.sca_name = this.addressDetail.sca_name
					let data =[]
					data = this.addressDetail.sca_name.split(",");
					this.addressName = data
					
					this.userCity = this.addressDetail.address
				}
			},
			
			
			
			
			//默认地址
			switchMen(event) {
				if (event.detail.value) {
					this.is_default = 1
				} else {
					this.is_default = 0
				}
				console.log(this.is_default)
			},
			//添加地址
			submitFromAddress() {
				if (this.userName == '') {
					this.$tools.showToast('请填写联系人名称')
				} else if (this.userPhone.length != 11) {
					this.$tools.showToast('手机号有误')
				} else if (this.sca_name == '') {
					this.$tools.showToast('请选择收货地址')
				} else {
					this.updateAddress()
				}
			},



			//保存地址
			updateAddress() {
				let data = {
					user_id: app.userInfo.id,
					name: this.userName,
					tel: this.userPhone,
					sca_name: this.sca_name,
					address: this.userCity,
					is_default: this.is_default,
					id: this.addressId
				}
				this.$axios.axios('POST', updateAddress, data)
					.then(res => {
						console.log(res);
						if (res.status == 1) {
							this.$tools.showToast('保存地址成功！')
							setTimeout(r => {
								this.$tools.navigateBack()
							}, 1000)
						} else {
							this.$tools.showToast(res.msg)
						}
					})
					.catch(err => {
						this.$tools.showToast('网络异常！')
					})
			},


			// 单选性别
			radios(event) {
				this.userSex = event
			},
			// 区域的选择
			bindPickerChange: function(e) {
				this.gpsAddress = e.target.value
			},
			changeRegion(region) {
				this.sca_name = region[0].name + ',' + region[1].name + ',' + region[2].name
				console.log('添加地址=====>', this.sca_name);
				let ssq = [];
				region.forEach(add => {
					ssq.push(add.name)
				})
				this.addressName = ssq;
			},
		}
	}
</script>

<style scoped>
	page {
		background: white;
	}

	.guan_imgs {
		width: 108rpx;
		height: 58rpx;
	}

	.container {
		font-size: 30rpx;
		color: #333333;
		font-weight: 600;
	}

	.content {
		padding: 22rpx 36rpx;
		border-bottom: 3rpx solid #f5f5f5;
	}

	.user_img {
		width: 88rpx;
		height: 88rpx;
		border-radius: 100rpx;
	}

	.content_input {
		text-align: right;
		color: #666666;
	}

	.bottom_total {
		margin: 88rpx 0;
	}

	.xia_dan {
		width: 500rpx;
		text-align: center;
		padding: 24rpx 0;
		margin: auto;
		border-radius: 100rpx;
		/* border:3rpx solid #666666; */
		background-color: #2AA5FE;
		color: #ffffff;
	}

	.citys {
		color: #666666;
		font-size: 28rpx;
	}

	.regiones {
		font-size: 30rpx;
	}
</style>
